<template>
  <view class="px-4 pt-6">
    <view class="h-10 flex items-center justify-between px-4 bg-white rounded">
      <view class="text-sm">红包总笔数</view>
      <view class="flex">
        <input class="text-right px-2" type="text" placeholder="0">
        币
      </view>
    </view>

    <view class="mt-3 h-10 flex items-center justify-between px-4 bg-white rounded">
      <view class="text-sm">红包个数</view>
      <view class="flex">
        <input class="text-right px-2" type="text" placeholder="0">
        个
      </view>
    </view>

    <view class="mt-3 h-10 flex items-center justify-between px-4 bg-white rounded">
      <view class="text-sm">过期时间</view>
      <view class="flex items-center">
        <picker class="flex-1 h-full flex items-center justify-end" v-model="expireValue" mode="selector" :range="expireTimeRange" range-key="text" @change="selectOperator">
          <view>{{ expireTimeRange[expireValue].text }}</view>
        </picker>
        <image class="ml-2 w-4 h-4" src="@/static/image/rt.png"></image>
      </view>
    </view>

    <view class="mt-3 bg-white rounded px-2 py-1">
      <textarea placeholder="恭喜发财, 百发百中!" class="w-full text-xs h-14"></textarea>
    </view>

    <view class="mt-4 text-center">红包总额(金币)</view>
    <view class="text-5xl text-center">0</view>

    <view class="mt-20 h-12 flex items-center justify-center text-center rounded-3xl bg-indigo-200 text-white">
      塞币进红包
    </view>
    <view class="mt-10 text-center text-sm text-gray-500">24小时未被领取, 红包金币将退回</view>

  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const expireValue = ref(0)
const expireTimeRange = ref([
  { value: 0, text: '24小时' },
  { value: 1, text: '48小时' },
  { value: 2, text: '72小时' },
  { value: 3, text: '96小时' },
  { value: 4, text: '120小时' },
  { value: 5, text: '144小时' },
  { value: 6, text: '168小时' },
])
</script>

<style scoped lang="scss">
page {
  min-height: 100vh;
  background: #f5f5f5;
}
</style>
